/*
 * @Author: xueyp
 * @Date: 2020-06-11 21:14:11
 * @Last Modified by: xueyp
 * @Last Modified time: 2020-06-12 15:21:34
 */
<template>
  <div class="ipList-wrapper">
    <div :key="index" v-for="(item,index) in list">
      <div class="propaganda-ip-list flex fac fpc">
        <img class="propaganda-ip-list-left" :src="item.image">
        <div class="propaganda-ip-list-right flex fac fpc">
          <div class="propaganda-ip-list-name">{{ item.ip_name }}</div>
          <div class="propaganda-ip-list-tag">
            {{ item.label }}
          </div>
          <div class="propaganda-ip-list-desc">{{ item.introduction }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.$axios
      .get("https://homeapptest.bojem.com/api/ip/list", {
        params: {
          appId: 3,
          // appId: localStorage.getItem("appId"),
          // token: localStorage.getItem("token"),
          type: 2
        }
      })
      .then(response => {
        const _data = response.data;
        if (_data.code === "0000") {
          this.list = _data.data;
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  }
};
</script>

<style scoped lang="stylus">
.ipList-wrapper {
  background: rgba(245, 245, 245, 1);
  height: 100%;
  padding: 0 0.3rem;

  .propaganda-ip-list {
    padding: 0 0.4rem;
    height: 3.3rem;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 0rem;
    margin-bottom: 0.24rem;

    .propaganda-ip-list-left {
      flex: 0 0 2.51rem;
      height: 2.51rem;
      overflow: hidden;
    }

    .propaganda-ip-list-right {
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 0.37rem;

      .propaganda-ip-list-name {
        font-size: 0.34rem;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 0.46rem;
        color: rgba(56, 56, 56, 1);
        opacity: 1;
      }

      .propaganda-ip-list-tag {
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 0.46rem;
        color: rgba(123, 44, 63, 1);
        opacity: 1;
      }

      .propaganda-ip-list-desc {
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 0.46rem;
        color: rgba(153, 153, 153, 1);
        opacity: 1;
        display: -webkit-box;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
